import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,Flex,Icon } from 'weaver-mobile';
import {Route, withRouter } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import AddApplication from './AddApplication';
import {getEquipment} from '../../util/common';
const getLabel = Tools.getLabel;
require('../../public/icon/iconfont')

@withRouter
@inject ('moreStore')
@observer
class Wallet extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            more: true,
            show:false,
        }

        this.equipment = getEquipment();    
    }

    static defaultProps = {
        prefixCls:"fna-more"
    }

    componentDidMount() {
        const { moreStore } = this.props;
        const { initData } = moreStore;
        let _isEMobile = this.equipment.isEMobile ? 1 : 0;
        initData({op:'1',isEMobile:_isEMobile});
    }

    componentWillUnmount(){
        const {refresh} = this.props;
        refresh();
    }

    render() {
        const { moreStore,prefixCls } = this.props;
        const { moreFunction,oftenFunction,toAddApplicationRoute,initData } = moreStore;

        return (
            <div className={`${prefixCls}`}>
                <div className={`${prefixCls}-commonly-use`}>
                    <h4>常用功能</h4>
                    {!this.state.show && <div className={'fna-often-small'}>
                            {oftenFunction.map(item =>{
                                const {key,icon,picturePath,hasClick} = item;
                                let comment = [];

                                if(oftenFunction.length > 1){
                                    comment = [
                                        <span key={key ? key : 'lastIcon'}>
                                            {icon == '' ? 
                                                <img src={`${picturePath}`}/>
                                                : <Icon type={icon == 'up' ? 'down' : icon} onClick={()=>{hasClick ? this.getStatus('show',true) : ''}} />}
                                        </span>
                                    ]
                                }

                                return comment
                            })}
                        </div>
                    }
                    {this.state.show && <Flex className={`fna-flex-icon fna-flex-icon-04 fan-big-icon`}>
                        {oftenFunction.map(item =>{
                            const {key,itemStyle,item_icon_style,icon,picturePath,hasClick,item_text_style,title} = item;
                            let comment = '';

                            if(oftenFunction.length > 1){
                                comment = [
                                    <Flex.Item className={`fna-flex-icon-item`} key={key ? key : 'lastIcon'} style={itemStyle}>
                                        <div className={`fna-flex-icon-item-icon`} style={item_icon_style}>
                                            {icon == '' ? <img src={`${picturePath}`} width='30' height='30'/> : <Icon type={icon} onClick={()=>{hasClick ? this.getStatus('show',false) : ''}}/>}
                                        </div>
                                        <div className={`fna-flex-icon-item-text`} style={item_text_style}>{title}</div>
                                    </Flex.Item>
                                ]
                            }

                            return comment
                        })}
                    </Flex>}
                    
                    <div className={'text-describe'}>
                        <div></div>
                        <h5>{getLabel(517360,'以上应用展示在首页')}</h5>
                        <div></div>
                    </div>
                    <div className={'add-commonly-use'} onTouchStart={()=>{this.props.history.push(toAddApplicationRoute.path)}}>
                        <Icon type={'icon-jia'} size='md' color={'#D4D4D4'}/>
                        <h5>{getLabel(611,'添加')}</h5>
                    </div>
                </div>

                <div className={`${prefixCls}-more-function`}>
                    <div>
                        <span>{getLabel(517361,'更多功能')}</span>
                        {this.state.more ? 
                            <Icon type={'arrow-up'} size='sm' color={'#D4D4D4'} onClick={()=>{this.getStatus('more',false)}}/> 
                            : <Icon type={'arrow-down'} size='sm' color={'#D4D4D4'} onClick={()=>{this.getStatus('more',true)}}/>}
                    </div>

                    {this.state.more && <Flex className={`fna-flex-icon fna-flex-icon-04 fan-big-icon`}>
                        {moreFunction.map(item =>{
                            let comment = '';
                            
                            comment = 
                                <Flex.Item className={`fna-flex-icon-item`} key={item.key} style={item.itemStyle}>
                                    <div className={`fna-flex-icon-item-icon`} style={item.item_icon_style}>
                                        <img src={`${item.picturePath}`} width='30' height='30' style={{borderRadius: '5px'}}/>
                                    </div>
                                    <div className={`fna-flex-icon-item-text`} style={item.item_text_style}>{item.title}</div>
                                </Flex.Item>

                            return comment
                        })}
                    </Flex>}
                </div>
                
                <Route
                    key={toAddApplicationRoute.id}
                    path={toAddApplicationRoute.path}
                    render={() => {
                        return <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                               <AddApplication 
                                    refresh={()=>{
                                        let _isEMobile = this.equipment.isEMobile ? 1 : 0;
                                        initData({op:'1',isEMobile:_isEMobile});
                                    }}
                               />
                            </div>
                        </RouteLayout>
                    }}
                />
            </div>
        )
    }   

    //获取 常用功能 展开与收起状态
    getStatus = (type,status) =>{
       this.setState({
           [type]:status
       })
    }


   

    

}

export default Wallet;